<template>
  <van-pull-refresh
    v-model="loading"
    success-text="刷新成功"
    @refresh="onRefresh"
  >
    <div class="my">
      <!-- <MyNav :userImg="userinfo.headImg" :username="userinfo.username"></MyNav> -->
      <van-nav-bar
        :fixed="true"
        :safe-area-inset-top="true"
        :placeholder="true"
      >
        <template #right>
          <router-link to="/setting">
            <div class="routeIcon">
              <van-icon color="#000000" name="setting-o" /></div
          ></router-link>
        </template>
      </van-nav-bar>
      <InfoCart v-if="JSON.stringify(userinfo) !== '{}'" :userinfo="userinfo" />

      <div class="tab-wrapper">
        <van-tabs v-model:active="active" animated>
          <van-tab title="作品" title-style="border-top-left-radius: 15px;">
            <div v-if="note.length !== 0">
              <lazy-component>
                <Note-Cart
                  v-for="item in note"
                  :key="item._id"
                  :note="item"
                  :ellipsisable="true"
                  @click="routerTo(`/note/detail/${item._id}`)"
                />
              </lazy-component>
            </div>
            <van-empty v-else image-size="0" description="啥也没有,快去发布" />
          </van-tab>
          <van-tab title="点赞" title-style="  border-top-right-radius: 15px;">
            <div v-if="likeNotes.length !== 0">
              <lazy-component>
                <Note-Cart
                  v-for="item in likeNotes"
                  :key="item._id"
                  :note="item"
                  @click="routerTo(`/note/detail/${item._id}`)"
              /></lazy-component>
            </div>
            <van-empty v-else image-size="0" description="还没有点赞嗷" />
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </van-pull-refresh>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity';
import { onBeforeMount } from '@vue/runtime-core';
import { useStore } from 'vuex';
// import MyNav from './components/MyNav.vue'
import InfoCart from './components/InfoCart.vue';
import NoteCart from './components/NoteCart.vue';
import { useRouter } from 'vue-router';
export default {
  components: { InfoCart, NoteCart },
  setup() {
    const router = useRouter();
    const store = useStore();
    const state = reactive({
      loading: false,
      userinfo: {},
      note: [],
      likeNotes: [],
      pageData: {
        fansLength: 0,
        follwerLength: 0,
      },
      timeout: {},
      active: '',
    });
    const onRefresh = () => {
      setTimeout(() => {
        state.loading = false;
      }, 1000);
    };
    const routerTo = (url) => {
      router.push({
        path: url,
      });
    };
    onBeforeMount(async () => {
      await store.dispatch('_getUserInfo');
      state.userinfo = store.state.userinfo;
      state.likeNotes = state.userinfo.likeNotes;
      await store.dispatch('_getAllNoteByUserId', state.userinfo._id);
      state.note = store.state.myNote;
      state.pageData.fansLength = state.userinfo.fans.length;
      state.pageData.follwerLength = state.userinfo.followers.length;
    });
    return { ...toRefs(state), onRefresh, routerTo };
  },
};
</script>
<style lang="less" scoped>
// :root {
//   --van-tabs-bottom-bar-color: black;
//   --van-tabs-bottom-bar-height: 5px;
// }
::v-deep(.van-tab__text) {
  font-family: '微软雅黑';
}
.routeIcon {
  ::v-deep(.van-icon) {
    font-size: 20px;
  }
}
::v-deep(.van-tabs__line) {
  background: black;
  z-index: 0;
  width: 28vw;
}
.hasFocusd {
  background: rgb(175, 176, 176);
  border-radius: 20px;
  box-sizing: border-box;
  padding: 4px 18px;
  font-size: 13px;
  color: rgb(56, 55, 55);
  font-family: '黑体';
}

.my {
  // background: #f5f5f5;
  height: 93vh;
  width: 100vw;
  margin: 0 auto;
  overflow-x: hidden;
}
</style>
